<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0; margin: 0;}
        li{
            height: 40px;
            line-height: 40px;
            border: 1px dashed #000;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div>
            <button class="addEle">新增</button>
        </div>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>
    // 节点: 文档节点 元素节点 属性节点 文本节点 注释节点

    // 节点新增:
    // document.createElement(tagName)  根据传入的标签名,创建一个元素节点,返回被创建的元素节点 

    // 注意:节点被创建之后,默认存在内存当中(浏览器), 只有当节点放到页面中之后,才会显示



    // 新增的节点如何放到页面中?
    
    // 放到父元素的最前面/最后面(父元素统筹)
    // parentElement.appendChild(Node)    向匹配的元素(父元素)中 追加 一个节点(元素节点/文本节点/注释节点)
    // parentElement.append(Node/string)   向匹配的元素(父元素)中 追加 一个节点(元素节点/文本节点/注释节点)/一段文本

    // parentElement.prepend(Node/string)   向匹配的元素(父元素)中 预追加 一个节点(元素节点/文本节点/注释节点)/一段文本
    
    // 追加:    放到父元素中所有内容的最后方
    // 预追加:  放到父元素中所有内容的最前方


    // 插入同级(父元素统筹)
    // parentElement.insertBefore(newNode,oldNode) 将一个节点(新节点/已存在的 => 元素节点/文本节点/注释节点)插入到另一个节点(已存在的)的前面  
    // 注意: 没有insertAfter()方法
    

    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");
    var addEle = document.querySelector(".addEle");


    // 点击新增按钮 => 新增一个li, 放到.list中所有元素的最后方

    addEle.onclick = function(){
        var ele = document.createElement("li"); // 创建元素节点 li => 赋值给变量ele
        console.log(ele);

        // 被创建的元素节点就是一个正常的元素
        ele.setAttribute("class","newLi"); //新增属性
        ele.innerText = "我是新增的li"; // 设置文本
        ele.style.background = "red"; // 设置样式
        ele.onclick = function(){  // 绑的事件
            console.log("我被点击了");
        }

        // ul.appendChild(ele); // 追加节点

        // ul.append(ele); // 追加节点
        // ul.append("hello world"); // 追加文本
        
        // ul.prepend(ele); // 预追加节点

        // 插入同级
        // ul.insertBefore(ele,mid);  // mid的前面
        ul.insertBefore(ele,mid.nextElementSibling);  // mid的后面 (mid的后一个元素的前面)
    }




</script>
</html>